<template>
    <div>
        <div class="top">
            <img src="../../assets/img/cg.png" alt="" style="width: 60px;height: 60px;">
            <h1 style="width: 100px;">采购商城</h1>
            <div class="top_one">
                <el-button type="primary" style="display: flex;"><img src="../../assets/img/shop.png" alt=""
                        style="width: 20px;height: 20px;margin-left: -50px;margin-top: -2px;">
                    <div style="width: 30px;flex-shrink: 0;margin-top: -18px;margin-left: 25px;">购物车</div>
                </el-button>
                <el-button type="primary">主要按钮</el-button>
                <img src="../../assets/img/fen.png" alt=""
                    style="width: 30px;height: 30px;margin-top: 5px;margin-left: 5px;">
            </div>
        </div>
        <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部（）" name="first">
                    <div class="sou">
                        <div class="sou-one">
                            <div class="sou-two">
                                <div class="sou-three">物料名称:</div>
                                <el-input v-model="input" placeholder="请输入名称"></el-input>

                            </div>
                            <div class="sou-two" style="margin-left: 10px;">
                                <div class="sou-three">物料分类:</div>
                                <el-input placeholder="请输入内容" v-model="input4">
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </div>

                        </div>

                    </div>
                    <div class="goods">
                        <div class="box" v-for="(item, index) in zzy" :key="index">
                            <img :src="item.a" alt="" style="width: 100%;height: 60%; flex-shrink: 0;">
                            <div class="box_a">
                                <div class="zi">{{ item.b }}</div>
                                <div class="zi_one">单位：{{ item.c }}</div>
                                <div class="zi_two">价格：{{ item.d }}</div>
                            </div>
                        </div>
                        <div class="block">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper" :total="400">
                            </el-pagination>
                        </div>
                       
                    </div>
                </el-tab-pane>





                <el-tab-pane label="电商（）" name="second"></el-tab-pane>
                <el-tab-pane label="采集（）" name="third"></el-tab-pane>
                <el-tab-pane label="自采（）" name="fourth"></el-tab-pane>
                <el-tab-pane label="未分组（）" name="fiveth"></el-tab-pane>


            </el-tabs>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: 'first',
            zzy: [
                {
                    a: require('../../assets/img/headportrait.png'),
                    b: '张帅扬',
                    c: '1个',
                    d: '无价'
                },
                {
                    a: require('../../assets/img/headportrait.png'),
                    b: '张帅扬',
                    c: '1个',
                    d: '无价'
                },
                {
                    a: require('../../assets/img/headportrait.png'),
                    b: '张帅扬',
                    c: '1个',
                    d: '无价'
                },
                {
                    a: require('../../assets/img/headportrait.png'),
                    b: '张帅扬',
                    c: '1个',
                    d: '无价'
                },
                {
                    a: require('../../assets/img/headportrait.png'),
                    b: '张帅扬',
                    c: '1个',
                    d: '无价'
                },
                {
                    a: require('../../assets/img/headportrait.png'),
                    b: '张帅扬',
                    c: '1个',
                    d: '无价'
                },


            ]
        };
    },
    methods: {

    }
};
</script>

<style>
.top {
    width: 100%;
    height: 60px;
    background-color: rgb(222, 222, 222);
    display: flex;
}

.top_one {
    width: 20%;
    height: 40px;
    display: flex;
    margin-top: 10px;
    margin-left: 850px;
}

.sou {
    width: 100%;
    height: 40px;
    background-color: rgb(231, 229, 229);
    display: flex;
}

.sou-one {
    width: 40%;
    flex-shrink: 0;
    display: flex;
    flex-shrink: 0;
}

.sou-two {
    width: 50%;
    flex-shrink: 0;
    display: flex;
}

.sou-three {
    width: 30%;
    line-height: 40px;
    flex-shrink: 0;
}

.goods {
    width: 100%;
    height: 600px;
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(255, 255, 255);
}

.box {
    width: 20%;
    height: 200px;
    margin-top: 30px;
    margin-left: 50px;
    background-color: antiquewhite;
    display: flex;
 flex-shrink: 0;
    flex-wrap: wrap;
}

.box_a {
    width: 100%;
    height: 40%;
    background-color: rgb(239, 239, 239);
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
}

.zi {
    width: 100%;
    font-size: 20px;
    margin-left: 10px;
    flex-shrink: 0;
}

.zi_one {
    font-size: 14px;
    margin-left: 10px;
    color: rgb(187, 186, 186);
    flex-shrink: 0;
    width: 100%;
}

.zi_two {
    font-size: 14px;
    margin-left: 10px;
    margin-top: px;
    color: rgb(189, 188, 188);
}
.block{
    flex-shrink: 0;
    margin-top: 280px;
    margin-left: 80px;
}
</style>